<template>
  <el-container class="full-container">
    <el-aside width="220px" class="aside-left">
      <div class="aside-header">
        <span>通道</span>
        <el-link :underline="false" type="primary" icon="el-icon-link" @click="viewPhysical">通道列表</el-link>
      </div>
      <ul class="aside-left-ul">
        <li
          v-for="(item) in shortPhysical"
          :key="item.id"
          :class="{'active': physicalId===item.id}"
          @click="physicalClick(item)"
        >
          <span :title="item.id+'-'+item.name">{{ item.id }}-{{ item.name }}</span>
          <ol>
            <li
              v-for="equipment in item.equipments"
              :key="equipment.id"
              :class="{'selected':equipment.id===equipmentId}"
              @click.stop="equipmentClick(item.id, equipment.id, equipment.type)"
            >
              {{ equipment.name }}
            </li>
          </ol>
        </li>
      </ul>
    </el-aside>
    <el-container>
      <el-main v-loading="isSubmitLoading" class="main-content">
        <div class="tool-control">
          <el-button
            class="filter-item"
            style="margin-right: 10px;"
            type="primary"
            @click="fileDownload"
          >文件下载
          </el-button>
          <el-upload action :show-file-list="false" :http-request="importPhysicalPort" class="filter-item">
            <el-button
              :loading="importLoading"
              type="primary"
              icon="el-icon-upload2"
            >导入配置
            </el-button>
          </el-upload>
          <el-button
            :loading="downloadLoading"
            class="filter-item"
            type="primary"
            icon="el-icon-download"
            @click="exportPhysicalPort"
          >导出配置
          </el-button>
          <el-button
            :loading="isSubmitLoading"
            :disabled="statistics.configApplyStatus!==1"
            class="filter-item"
            style="margin-left: 10px;"
            type="primary"
            icon="el-icon-open"
            @click="useConfigSetting()"
          >应用配置
          </el-button>
          <el-button
            :loading="isSubmitLoading"
            :disabled="statistics.managerConnectionStatus!==1 || statistics.configSyncStatus!==1"
            class="filter-item"
            style="margin-left: 10px;"
            type="primary"
            icon="el-icon-refresh"
            @click="syncConfigSetting()"
          >上传配置
          </el-button>
        </div>
        <physical-port
          v-if="target==='physical'"
          @save="getShortPhysicalPortWithEquipment"
        ></physical-port>
        <equipment
          v-if="target==='equipment'"
          ref="equipment"
          @save="getShortPhysicalPortWithEquipment"
        ></equipment>
        <data-element
          v-if="target==='data'"
          ref="dataElement"
          @save="getShortPhysicalPortWithEquipment"
        ></data-element>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  import { getShortPhysicalPortWithEquipment, exportPhysicalPort, importPhysicalPort } from "@/api/physicalPort";
  import { getStatistics, applyConfigToNorth, applyConfigToSouth } from "@/api/gateway";

  import PhysicalPort from "./components/PhysicalPort";
  import Equipment from "./components/Equipment";
  import DataElement from "./components/DataElement";

  export default {
    components: {
      'physical-port': PhysicalPort,
      'equipment': Equipment,
      'data-element': DataElement
    },
    data() {
      return {
        downloadLoading: false,
        importLoading: false,
        statistics: {},
        shortPhysical: [],
        physicalId: undefined,
        equipmentId: undefined,
        target: 'physical',
        isSubmitLoading: false
      };
    },
    computed: {},
    created() {
      this.getShortPhysicalPortWithEquipment();
    },
    methods: {
      getStatistics() {
        this.isSubmitLoading = true;
        getStatistics().then(result => {
          this.statistics = result;
          this.isSubmitLoading = false;
        });
      },
      // 获取通道信息
      getShortPhysicalPortWithEquipment() {
        getShortPhysicalPortWithEquipment().then(result => {
          if (result.length) {
            this.shortPhysical = result;
          }
        });
        this.getStatistics();
      },
      viewPhysical() {
        this.target = 'physical';
        this.physicalId = undefined;
        this.equipmentId = undefined;
      },
      useConfigSetting() {
        this.$confirm("该操作将应用配置， 是否继续?", "确定执行应用配置操作吗？", { type: "warning" })
          .then(() => {
            const loading = this.$loading({
              lock: true,
              text: '请稍候...',
              spinner: 'el-icon-loading',
              background: 'rgba(255, 255, 255, 0.7)'
            });
            applyConfigToSouth()
              .then(() => {
                this.$message({
                  message: "应用配置成功",
                  type: "success"
                });
                loading.close();
                this.getStatistics();
              })
              .catch(() => {
                loading.close();
              });
          })
          .catch(() => {

          });
      },
      syncConfigSetting() {
        this.$confirm("该操作将上传配置， 是否继续?", "确定上传配置吗？", { type: "warning" })
          .then(() => {
            const loading = this.$loading({
              lock: true,
              text: '请稍候...',
              spinner: 'el-icon-loading',
              background: 'rgba(255, 255, 255, 0.7)'
            });
            applyConfigToNorth()
              .then(() => {
                this.$message({
                  message: "上传配置成功",
                  type: "success"
                });
                loading.close();
                this.getStatistics();
              })
              .catch(() => {
                loading.close();
              });
          })
          .catch(() => {

          });
      },
      physicalClick(item) {
        this.target = 'equipment';
        this.physicalId = item.id;
        this.$nextTick(() => {
          this.$refs['equipment'].getEquipmentByPortId(item.id, item.type);
        })
      },
      equipmentClick(portId, equipId, equipType) {
        this.target = 'data';
        this.equipmentId = equipId;
        this.$nextTick(() => {
          this.$refs['dataElement'].getFullPageDataElement(portId, equipId, equipType);
        })
      },
      importPhysicalPort(fileObj) {
        this.$confirm("批量导入将清空并覆盖已配置数据，确定继续吗？", "确定执行导入操作吗？", {
          type: "warning"
        })
          .then(() => {
            const loading = this.$loading({
              lock: true,
              text: '请稍候...',
              spinner: 'el-icon-loading',
              background: 'rgba(255, 255, 255, 0.7)'
            });
            const param = new FormData();
            param.append("file", fileObj.file);
            importPhysicalPort(param).then(result => {
              loading.close();
              this.getFullPageDataElement();
              this.$message({
                message: "导入成功",
                type: "success"
              });
            });
          })
          .catch(() => {
          });
      },
      exportPhysicalPort() {
        const loading = this.$loading({
              lock: true,
              text: '请稍候...',
              spinner: 'el-icon-loading',
              background: 'rgba(255, 255, 255, 0.7)'
            });
        exportPhysicalPort().then(result => {
          this.download(result, '配置.xlsx');
          loading.close();
        });
      },
      download(data, name) {
        const blob = new Blob([data]);
        const fileName = name;
        if ('download' in document.createElement('a')) { // 非IE下载
          const elink = document.createElement('a');
          elink.download = fileName;
          elink.style.display = 'none';
          elink.href = URL.createObjectURL(blob);
          document.body.appendChild(elink);
          elink.click();
          URL.revokeObjectURL(elink.href); // 释放URL 对象
          document.body.removeChild(elink);
        } else { // IE10+下载
          navigator.msSaveBlob(blob, fileName);
        }
      },
      fileDownload() {
        this.$router.push({
          name: 'fileDownload'
        })
      }
    }
  };
</script>

<style lang="scss" scoped>
  .full-container {
    min-height: calc(100vh - 50px);
  }

  .aside-left {
    margin-bottom: 0;
  }

  .aside-header {
    display: flex;
    align-items: center;
    font-weight: bold;

    span {
      flex: 1;
    }

    &:before {
      content: '';
      display: inline-block;
      margin-right: 5px;
      width: 4px;
      height: 16px;
      background-color: #000000;
    }
  }

  .aside-left-ul {
    margin: 0;
    list-style: none;
    padding-left: 0;

    & > li {
      position: relative;
      line-height: 40px;
      cursor: pointer;
      border-bottom: 1px dashed #ccc;
      padding-left: 20px;

      &:before {
        position: absolute;
        top: 15px;
        z-index: 1;
        left: 0;
        content: '';
        width: 10px;
        height: 10px;
        border: 1px solid #000;
      }

      &:after {
        position: absolute;
        top: 12px;
        z-index: 1;
        right: 0;
        content: "\E6E0";
        font-family: 'element-icons' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        vertical-align: baseline;
        display: inline-block;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }

      &.active {
        color: #1890ff;
        border-color: #1890ff;
        border-bottom-style: solid;

        &:before {
          background-color: #1890ff;
          border-color: #1890ff;
        }

        &:after {
          transform: rotate(90deg);
        }

        ol {
          display: block;
        }
      }
      & > span {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    ol {
      display: none;
      position: relative;
      padding-left: 0px;
      list-style: none;

      &:before {
        content: '';
        position: absolute;
        left: -15px;
        top: -10px;
        bottom: 19px;
        border-left: 1px dashed #1890ff;
      }

      & > li {
        position: relative;
        font-size: 14px;
        color: #333333;

        &.selected {
          color: #1890ff;
        }

        &:before {
          content: '';
          position: absolute;
          left: -13px;
          top: 20px;
          width: 10px;
          border-bottom: 1px dashed #1890ff;
        }
      }
    }
  }

  .main-content {
    position: relative;

    .tool-control {
      position: absolute;
      top: 12px;
      right: 20px;
      z-index: 1;
      justify-content: flex-start;
      div.filter-item{
        display: inline-block;
        margin-right: 10px;
      }
    }
  }

  .aside-bottom {
    text-align: center;
    margin-top: 8px;

    button {
      width: 100%;
      display: block;
    }
  }
</style>
